<template>
    <div>
        <el-dialog v-model="dialogVisible2" title="移动" width="500" :before-close="handleClose2">
            <div class="move" v-if="dfolderlist.length == 0">全部文件</div>
            <div class="move" v-else>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item @click="back1()">返回上一级</el-breadcrumb-item>
                    <el-breadcrumb-item @click="all1()">
                        <span style="cursor: pointer;"> 全部文件</span>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item @click="currentfolder1(item, index)" v-for="(item, index) in dfolderlist">
                        <span style="cursor: pointer;"> {{ item.fileName }}</span>
                    </el-breadcrumb-item>

                </el-breadcrumb>
            </div>
            <div v-if="folderlist.length > 0">
                <div class="wjjlist" v-for="item in folderlist" @click="curfolder(item)">
                    <img style="width:32px;height:32px;vertical-align:middle" src="../assets/folder.png" alt="">
                    <div>{{ item.fileName }}</div>
                </div>
            </div>
            <div v-else style="text-align: center;padding:20px;box-sizing: border-box;">

                <span v-if="dfolderlist[dfolderlist.length - 1]"> 移动到{{ dfolderlist[dfolderlist.length - 1].fileName
                    }}</span>
            </div>
            <div style="text-align: right;">
                <el-button type="info" size="mini" @click="reset()">取消</el-button>
                <el-button type="success" size="mini" @click="movedc()">移动到此</el-button>
                <el-button type="success" size="mini" @click="movedc1()">移动到根目录</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import service from '@/utils/Request';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus'
const route = useRoute();
const dialogVisible2 = ref(false)
const emit = defineEmits(["getlist"])
const filePid = ref(0)
const dfolderlist = ref([])
const folderlist = ref([])
const currentFileIds = ref([])
const selectdatas = ref([]);
const mvfilePid = ref(0);
const back1 = () => {

    let data = [];

    data = route.query.path.split("/") ? route.query.path.split("/") : [];
    dfolderlist.value.splice(dfolderlist.value.length - 1, 1);
    console.log(dfolderlist.value, "    dfolderlist.value")
    filePid.value = dfolderlist.value.length > 0 ? dfolderlist.value[dfolderlist.value.length - 1].fileId : data.length > 0 ? data[data.length - 1] : 0;
    getfolderlist()
}
const reset = () => {
    dialogVisible2.value = false
}
const movedc = async () => {
    if (dfolderlist.value.length == 0 || route.query.path == dfolderlist.value[dfolderlist.value.length - 1].fileId) {
        ElMessage({
            type: 'warning',
            message: "文件已在当前目录中"
        })
    } else {
        mvfilePid.value = dfolderlist.value[dfolderlist.value.length - 1].fileId
        movefolder()
    }

    // console.log(dfolderlist.value[dfolderlist.value.length - 1].fileId)
}
const movedc1 = () => {
    if (!route.query.path) {
        return ElMessage({
            type: 'warning',
            message: "文件已在当前目录中"
        })
    }
    mvfilePid.value = '0'
    movefolder()
}
const movefolder = async () => {
    const res = await service.post("/file/changeFileFolder", {
        fileIds: selectdatas.value.join(","),
        filePid: mvfilePid.value
    })
    if (res.code == 1) {
        emit("getlist")
        dialogVisible2.value = false
    } else {
        ElMessage({
            type: 'warning',
            message: "失败"
        })
    }
}
const curfolder = (item) => {
    filePid.value = item.fileId;
    dfolderlist.value.push(item)
    getfolderlist()
}

const all1 = () => {
    filePid.value = 0;
    dfolderlist.value = []
    getfolderlist()
}
const currentfolder1 = (item, index) => {
    filePid.value = item.fileId;
    dfolderlist.value.splice(index + 1, dfolderlist.value.length)
    getfolderlist()
}
const open = async (e, f) => {
    selectdatas.value = f
    let data = [];

    data = route.query.path ? route.query.path.split("/") : [];
    dialogVisible2.value = true
    filePid.value = data.length > 0 ? data[data.length - 1] : 0
    currentFileIds.value = e;

    getfolderlist()
}
const getfolderlist = async () => {
    const res = await service.post("/file/loadAllFolder", {
        filePid: filePid.value,
        currentFileIds: currentFileIds.value.join(",")
    })
    console.log(res)
    folderlist.value = res.data

}
const handleClose2 = () => {
    dialogVisible2.value = false
}
defineExpose({
    open
})
</script>
<style lang="css">
.wjjlist:hover {
    background: #f1f1f1;
}

.wjjlist {
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
}

.project {
    width: 100%;
    height: 100%;
}

.cz {
    display: none;
}

.el-table__row:hover .cz {
    display: block !important;
}

.move {
    padding-left: 10px;
    background: #f1f1f1;
    width: 100%;
    line-height: 30px;
    height: 30px;
    display: flex;
    align-items: center;
}
</style>